<template>
  <div class="container">
    <el-card>
      <el-form :inline="true">
        <el-form-item label="学科名称">
          <el-input v-model="requestParams.subjectName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="filter">搜索</el-button>
          <el-button size="mini" @click="clear">清除</el-button>
        </el-form-item>
        <el-form-item class="header">
          <el-button
            type="success"
            class="add-btn"
            @click="addSubject()"
            size="small"
            icon="el-icon-edit"
          >新增学科</el-button>
        </el-form-item>
      </el-form>
      <!-- 总条数 -->
      <el-alert :title="`数据一共${total}条`" :closable="false" type="info" show-icon></el-alert>
      <el-table :data="subjects">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="subjectName" label="学科名称"></el-table-column>
        <el-table-column width="100" prop="username" label="创建者"></el-table-column>
        <el-table-column width="160" prop="addDate" label="创建日期">
          <template slot-scope="scope">{{ scope.row.addDate | parseTimeByString }}</template>
        </el-table-column>
        <el-table-column label="前台是否显示">
          <template slot-scope="scope">{{ scope.row.isFrontDisplay === 1? '是' : '否' }}</template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录"></el-table-column>
        <el-table-column prop="tags" label="标签"></el-table-column>
        <el-table-column prop="totals" width="80" label="题目数量"></el-table-column>
        <el-table-column label="操作" width="240">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="$router.push(`directorys?id=${scope.row.id}&name=${encodeURIComponent(scope.row.subjectName)}`)"
            >学科分类</el-button>
            <el-button
              type="text"
              @click="$router.push(`tags?id=${scope.row.id}&name=${encodeURIComponent(scope.row.subjectName)}`)"
            >学科标签</el-button>
            <el-button type="text" @click="addSubject(scope.row)">修改</el-button>
            <el-button type="text" @click="deleteSubject(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="tiaoshu"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="requestParams.page"
        :page-size="requestParams.pagesize"
        :page-sizes="[5, 10, 15, 20]"
        layout="prev, pager,next,sizes,jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 修改|增加弹出框 -->
    <addSubject ref="addSubject" :data="cSubject" @updateList="updateList()"></addSubject>
  </div>
</template>
<script>
import { list as getSubject, remove } from '@/api/hmmm/subjects'
import addSubject from '../components/subjects-add.vue'
export default {
  name: 'subjectList',
  data () {
    return {
      subjects: [],
      requestParams: {
        subjectName: '',
        page: 1,
        pagesize: 10

      },
      total: 0,
      cSubject: {}
    }
  },
  components: {
    addSubject
  },
  created () {
    this.getSubject()
  },
  methods: {
    filter () {
      // 搜索的逻辑
      this.requestParams.page = 1
      this.getSubject()
    },
    clear () {
      // 清除的逻辑
      this.requestParams = {
        subjectName: '',
        page: 1,
        pageSize: 10
      }
      this.getSubject()
    },
    updateList () {
      // 修改学科的逻辑
      if (!this.cSubject.id) {
        this.requestParams.page = 1
      }
      this.getSubject()
      // this.$refs.addSubject.submitForm()
    },
    addSubject (subjects) {
      // 新增学科的逻辑
      this.cSubject = subjects || {}
      this.$nextTick(() => {
        this.$refs.addSubject.openModal()
      })
      // console.log(subjects)
    },

    async deleteSubject (subjects) {
      // 删除学科的逻辑
      await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(subjects)
        // this.$message.success('删除成功！')

        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getSubject()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页的切换
    handleCurrentChange (val) {
      this.requestParams.page = val
      this.getSubject()
    },
    // 切换条数
    handleSizeChange (size) {
      this.requestParams.page = 1
      this.requestParams.pagesize = size
      this.getSubject()
    },
    async  getSubject () {
      const { data } = await getSubject(this.requestParams)
      // console.log(data)
      this.subjects = data.items
      this.total = data.counts
    }

  }
}
</script>
<style>
.container {
  padding: 20px;
}
.header {
  float: right;
}
.add-btn {
  margin-right: 0;
}
.tiaoshu {
  float: right;
  margin: 20px 15px;
}
</style>
